<!--
  This file is part of Moeditor.

  Copyright (c) 2016 Menci <huanghaorui301@gmail.com>

  Moeditor is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  Moeditor is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with Moeditor. If not, see <http://www.gnu.org/licenses/>.
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <base href="../href.html">
        <title>HexoEditor Settings</title>
		<script>
		window.$ = window.jQuery = require("jquery");
        window.document.querySelector('html').classList.add(process.platform);
        window.app = require('electron').remote.app;
        window.moeApp = app.moeApp;
        window.w = require('electron').remote.getCurrentWindow();
        const fs = require('fs');
        const path = require('path');
        const log = moeApp.getLog4js().getLogger('Settings');
        </script>

        <link rel="stylesheet" href="moe-scrollbar.css">
        <script type="text/javascript" src="moe-localize.js"></script>

        <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">

        <link rel="stylesheet" href="settings/moe-settings.css">
        <script type="text/javascript" src="settings/moe-settings.js"></script>

        <link rel="stylesheet" href="fonts/moe-fonts.css">
        <link rel="stylesheet" href="settings/moe-tabview.css">
        <script type="text/javascript" src="settings/moe-tabview.js"></script>
    </head>
    <body>
        <div id="electron-titlebar" class="drag inset"></div>
        <div id="main">
            <div class="tabview">
                <div class="bar">
                    <div class="item selected" data-tab="general">
                        <div class="image"><i class="fa fa-cog" aria-hidden="true"></i></div>
                        <div class="text l10n">General</div>
                    </div>
                    <div class="item" data-tab="edit">
                        <div class="image"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></div>
                        <div class="text l10n">Edit</div>
                    </div>
                    <!--<div class="item" data-tab="appearance">-->
                        <!--<div class="image"><i class="fa fa-paint-brush" aria-hidden="true"></i></div>-->
                        <!--<div class="text l10n">Appearance</div>-->
                    <!--</div>-->
                    <div class="item" data-tab="hexo">
                        <div class="image"><i class="fa fa-code" aria-hidden="true"></i></div>
                        <div class="text l10n">Hexo</div>
                    </div>
                    <div class="item" data-tab="render">
                        <div class="image"><i class="fa fa-magic" aria-hidden="true"></i></div>
                        <div class="text l10n">Render</div>
                    </div>
                    <div class="item" data-tab="image">
                        <div class="image"><i class="fa fa-picture-o" aria-hidden="true"></i></div>
                        <div class="text l10n">Image</div>
                    </div>
                </div>
                <div class="content">
                    <div class="panel" data-tab="general" style="display: block; ">
                        <table width="80%" align="center">
                            <tr>
                                <td width="40%" class="l10n">Language</td>
                                <td width="60%">
                                    <select class="settings-item dont-notify" data-key="locale">
                                        <option value="default" class="l10n">System Default</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Reload when file changed</td>
                                <td width="60%">
                                    <select class="settings-item" data-key="auto-reload">
                                        <!--<option value="auto" class="l10n">Auto</option>-->
                                        <option value="prompt" class="l10n">Prompt</option>
                                        <option value="never" class="l10n">Never</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Auto save</td>
                                <td width="60%">
                                    <select class="settings-item" data-key="auto-save">
                                        <option value="auto" class="l10n">Auto</option>
                                        <option value="prompt" class="l10n">Prompt</option>
                                        <!--<option value="never" class="l10n">Never</option>-->
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Zoom factor</td>
                                <td width="60%">
                                    <script>
                                        document.write(`<input class="settings-item" id="scaleFactor" type="number" data-key="scale-factor" value="${moeApp.config.get('scale-factor')}" title="0.7 ~ 1.6">`);
                                    </script>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="panel" data-tab="edit">
                        <table width="80%" align="center">
                            <tr>
                                <td width="40%" class="l10n" >Def Show Number</td>
                                <td width="60%">
                                    <input class="settings-item"  type="checkbox" data-key="editor-ShowLineNumber">
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Font</td>
                                <td width="60%">
                                    <select class="settings-item" data-key="editor-font">
                                        <option value="default" class="l10n">Default</option>
                                        <option value="monospace">Monospace</option>
                                        <option value="serif">Serif</option>
                                        <option value="sans">Sans</option>
                                        <option value="SansPro">SansPro</option>
                                        <option value="Merriweather">Merriweather</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Font Size</td>
                                <td width="60%">
                                    <input class="settings-item" type="number" data-key="editor-font-size" value="14">
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Line Height</td>
                                <td width="60%">
                                    <input class="settings-item" type="number" data-key="editor-line-height" value="2">
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Tab Size</td>
                                <td width="60%">
                                    <input class="settings-item" type="text" data-key="tab-size" value="4">
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--<div class="panel" data-tab="appearance">-->
                        <!--<table width="80%" align="center">-->
                            <!--<tr>-->
                                <!--<td width="40%" class="l10n">Color Theme</td>-->
                                <!--<td width="60%">-->
                                    <!--<select class="settings-item" data-key="editor-theme">-->
                                            <!--<script>-->
                                                <!--fs.readdirSync(path.resolve(path.dirname(path.dirname(require.resolve('codemirror'))), 'theme'))-->
                                                    <!--.filter(s => s.endsWith('.css'))-->
                                                    <!--.map(s => s.substr(0, s.length - 4))-->
                                                    <!--.forEach(s => {-->
                                                        <!--document.write(`<option value="${s}">${s}</option>`)-->
                                                    <!--});-->
                                            <!--</script>-->
                                    <!--</select>-->
                                <!--</td>-->
                            <!--</tr>-->
                        <!--</table>-->
                    <!--</div>-->
                    <div class="panel" data-tab="hexo">
                        <table width="80%" align="center">
                            <tr>
                                <td width="30%" class="l10n">Hexo Auto</td>
                                <td width="70%">
                                    <div id="hexo-auto-setting" style="width: 50px"><i class="fa fa-magic fa-flip-horizontal" aria-hidden="true"></i></div>
                                </td>
                            </tr>
                            <tr>
                                <td width="30%" class="l10n">Hexo Mode</td>
                                <td width="70%">
                                    <input type="checkbox" class="settings-item" data-key="hexo-config-enable">
                                </td>
                            </tr>
                            <tr>
                                <td width="30%" class="l10n">Hexo Config</td>
                                <td width="70%">
                                    <input type="text" class="settings-item" readonly  data-key="hexo-config" style="width: calc(100% - 25px);">
                                    <div style="display: inline-block; margin-left: -1px; position: absolute; " id="hexo-config-btn">
                                        <button class="button-add-remove button-add" ><i class="fa fa-folder-o" aria-hidden="true"></i></button>
                                    </div>
                                </td>
                            </tr>
                            <tr style="height: 60px; ">
                                <td width="30%" class="l10n">Hexo tags</td>
                                <td width="70%">
                                    <select class="settings-item" multiple size="5" id="custom-tags" style="height: 90px; width: calc(100% - 25px);overflow: auto;">
                                        <script>
                                            const t = moeApp.config.get('hexo-tag-paths');
                                            for (var i=0,len=t.length;i<len;i++) {
                                                let s=t[i];
                                                document.write(`<option value="${s}">${s}</option>`);
                                            }
                                        </script>
                                    </select>
                                    <div style="display: inline-block; margin-left: -1px; position: absolute; ">
                                        <button class="button-add-remove button-add" style="border-bottom: none; "><i class="fa fa-plus" aria-hidden="true"></i></button>
                                        <br>
                                        <button class="button-add-remove button-remove"><i class="fa fa-minus" aria-hidden="true"></i></button>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="panel" data-tab="render">
                        <table width="80%" align="center">
                            <tr>
                                <td width="40%" class="l10n">TeX Math Expressions</td>
                                <td width="60%">
                                    <input type="checkbox" class="settings-item" data-key="math">
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">UML Diagrams</td>
                                <td width="60%">
                                    <input type="checkbox" class="settings-item" data-key="uml-diagrams">
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Breaks</td>
                                <td width="60%">
                                    <input type="checkbox" class="settings-item" data-key="breaks">
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Render Theme</td>
                                <td width="60%">
                                    <select class="settings-item" data-key="render-theme" style="width: calc(100% - 50px); ">
                                        <script>
                                            fs.readdirSync(`${app.getAppPath()}/themes`)
                                                .forEach(s => {
                                                    document.write(`<option value="\*${s}" class="builtin">*${s}</option>`);
                                                });

                                            const custom = moeApp.config.get('custom-render-themes');
                                            for (const s in custom) {
                                                if (fs.existsSync(path.resolve( custom[s],'main.css')))
                                                    document.write(`<option value="${s}">${s}</option>`);
                                                else
                                                    document.write(`<option class="invalidFile" value="${s}">${s}</option>`);
                                            }
                                        </script>
                                    </select>
                                    <button class="button-add-remove button-add" style="border-right: none; margin-left: -5px; "><i class="fa fa-plus" aria-hidden="true"></i></button>
                                    <button class="button-add-remove button-remove" style="margin-left: -4px; "><i class="fa fa-minus" aria-hidden="true"></i></button>
                                </td>
                            </tr>
                            <tr>
                                <td width="40%" class="l10n">Highlight Theme</td>
                                <td width="60%">
                                    <select class="settings-item" data-key="highlight-theme">
                                    </select>
                                </td>
                            </tr>
                            <tr style="height: 75px; ">
                                <td width="40%" class="l10n">Custom CSSs</td>
                                <td width="60%">
                                    <select class="settings-item" multiple size="5" id="custom-csss" style="height: 50px; width: calc(100% - 25px); font-size: 11px; ">
                                        <script>
                                            const a = moeApp.config.get('custom-csss');
                                            for (const s in a) {
                                                document.write(`<option value="${s}"${a[s].selected ? ' selected' : ''}>${s}</option>`);
                                            }
                                        </script>
                                    </select>
                                    <div style="display: inline-block; margin-left: -1px; position: absolute; ">
                                        <button class="button-add-remove button-add" style="border-bottom: none; "><i class="fa fa-plus" aria-hidden="true"></i></button>
                                        <br>
                                        <button class="button-add-remove button-remove"><i class="fa fa-minus" aria-hidden="true"></i></button>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="panel" data-tab="image" style="display: block; ">
                        <table width="80%" align="center">
                            <tr>
                                <td width="30%" class="l10n">Source Center</td>
                                <td width="70%">
                                    <input class="settings-item-image" readonly id="image-source-center" type="url" style="width: calc(100% - 25px);"/>
                                    <div style="display: inline-block; margin-left: -1px; position: absolute; " id="image-source-center-btn">
                                    <button class="button-add-remove button-add" ><i class="fa fa-folder-o" aria-hidden="true"></i></button>

                                </div>
                                </td>
                            </tr>
                            <tr>
                                <td width="30%" class="l10n">Web Type</td>
                                <td width="70%">
                                    <select class="settings-item-image" id="image-web-type">
                                        <option value="smms" class="l10n">WebSM</option>
                                        <option value="qiniu" class="l10n">QiNiu</option>
                                        <option value="cos" class="l10n">WebCOS</option>
                                    </select>
                                </td>
                            </tr>
                            <tr data-type="image-smms" style="display:table-row">
                                <td width="30%" class="l10n">BackImage</td>
                                <td width="70%">
                                    <div id="image-back-type">
                                        <span id="image-back-type-qiniu" class="checkbtn"></span><span class="l10n" >QiNiu</span>
                                       <span id="image-back-type-cos" class="checkbtn"></span><span class="l10n" >WebCOS</span>
                                    </div>
                                </td>
                            </tr>
                            <tr data-type="image-qiniu" style="display:none">
                                <td width="30%" class="l10n">AccessKey</td>
                                <td width="70%">
                                    <input class="settings-item-image" type="password" id="image-qiniu-accessKey"/>
                                </td>
                            </tr>
                            <tr data-type="image-qiniu" style="display:none">
                                <td width="30%" class="l10n">SecretKey</td>
                                <td width="70%">
                                    <input class="settings-item-image" type="password" id="image-qiniu-secretKey"/>
                                </td>
                            </tr>
                            <tr data-type="image-qiniu" style="display:none">
                                <td width="30%" class="l10n">Bucket</td>
                                <td width="70%">
                                    <select class="settings-item-image" id="image-qiniu-bucket">
                                    </select>
                                </td>
                            </tr>
                            <tr data-type="image-qiniu" style="display:none">
                                <td width="30%" class="l10n">BaseWeb</td>
                                <td width="70%">
                                    <input class="settings-item-image" id="image-qiniu-url-protocol" readonly style="transition: width .5s;  width:53px" />
                                    <select class="settings-item-image" id="image-qiniu-url" style="transition: width .5s;width: calc(100% - 54px);">
                                    </select>
                                </td>
                            </tr>
                            <tr data-type="image-cos" style="display:none">
                                <td width="30%" class="l10n">AccessKey</td>
                                <td width="70%">
                                    <input class="settings-item-image" type="password" id="image-cos-accessKey"/>
                                </td>
                            </tr>
                            <tr data-type="image-cos" style="display:none">
                                <td width="30%" class="l10n">SecretKey</td>
                                <td width="70%">
                                    <input class="settings-item-image" type="password" id="image-cos-secretKey"/>
                                </td>
                            </tr>
                            <tr data-type="image-cos" style="display:none">
                                <td width="30%" class="l10n">Bucket</td>
                                <td width="70%">
                                    <select class="settings-item-image" id="image-cos-bucket">
                                    </select>
                                </td>
                            </tr>
                            <tr data-type="image-cos" style="display:none">
                                <td width="30%" class="l10n">BaseWeb</td>
                                <td width="70%">
                                    <input class="settings-item-image" id="image-cos-url-protocol" readonly style="transition: width .5s;  width:53px" />
                                    <input class="settings-item-image" id="image-cos-url" style="transition: width .5s;width: calc(100% - 54px);" />
                                </td>
                            </tr>
                            <tr data-type="image-cos" style="display:none">
                                <td width="30%" class="l10n">Customize</td>
                                <td width="70%">
                                    <input class="settings-item-image"  type="checkbox" id="image-cos-customize-enable" >
                                    <input class="settings-item-image" id="image-cos-customize" style="width: calc(100% - 23px);" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
